<template>
    <div class="message-page">
        <Tabs value="name1" @on-click="tabSwitch">
            <TabPane :label="'待办 ('+msgData.plCount+')'" name="name1" class="flexC tabs">
                <div v-if="tabName === 'name1'" class="content flexC">
                    <div class="tabItem flexR" v-for="(item,index) in msgData.pl" :key="item+index">
                        <div>
                            <Avatar v-if="item.type === 'msg'" style="background-color: #3391E5" icon="md-mail"/>
                            <Avatar v-if="item.type === 'hy'" style="background-color: #87D068" icon="ios-people"/>
                            <Avatar v-if="item.type === 'sq'" style="background-color: #FE5C57" icon="ios-information"/>
                            <Avatar v-if="item.type === 'sc'" style="background-color: #FF9900" icon="ios-star"/>
                            <Avatar v-if="item.type === 'pl'" style="background-color: #3391E5" icon="ios-chatbubbles-outline"/>
                        </div>
                        <div class="flexC" @click="checkPl(item)">
                            <span>收到 <span style="color: #2d8cf0">“{{item.name}}”</span> 的一条评论，待审核</span>
                            <span>{{item.createTime | timeType}}</span>
                        </div>
                    </div>
                    <div v-if="msgData.pl.length>0" class="more flexR" @click="getMorePl()">
                        <span class="blueText">加载更多</span>
                    </div>
                    <div v-else class="more flexR">
                        <span>暂无数据</span>
                    </div>
                </div>
                <div class="clear flexR pointer" @click="updataPl()">
                    <Icon type="ios-refresh" size="22"/>
                    <span>刷新</span>
                </div>
            </TabPane>
            <!--<TabPane :label="'关注 ('+msgData.gz.length+')'" name="name2" class="flexC tabs">
                <div v-if="tabName === 'name2'" class="content flexC">
                    <div class="tabItem flexR" v-for="(item,index) in msgData.gz" :key="item+index">
                        <div>
                            <Avatar :src="item.img" />
                        </div>
                        <div class="flexC">
                            <span>{{item.title}}</span>
                            <span>{{item.time}}</span>
                        </div>
                    </div>
                    <div v-if="msgData.gz.length>0" class="more flexR">
                        <span class="blueText">加载更多</span>
                    </div>
                    <div v-else class="more flexR">
                        <span>暂无数据</span>
                    </div>
                </div>
                <div class="clear flexR pointer" v-if="msgData.gz.length>0">
                    <Icon type="md-checkmark" size="22"/>
                    <span>清空关注</span>
                </div>
            </TabPane>
            <TabPane :label="'待办 ('+msgData.db.length+')'" name="name3" class="flexC tabs tab3">
                <div v-if="tabName === 'name3'" class="content flexC">
                    <div class="tabItem flexR" v-for="(item,index) in msgData.db" :key="item+index">
                        <div class="flexC">
                            <span>{{item.title}}</span>
                            <span>需要在 {{item.time}} 之前完成</span>
                        </div>
                        <div class="status flexC">
                            <span class="wks" v-if="item.status === 0">未开始</span>
                            <span class="jxz" v-if="item.status === 1">进行中</span>
                            <span class="jjdq" v-if="item.status === 2">将到期</span>
                        </div>
                    </div>
                    <div v-if="msgData.db.length>0" class="more flexR">
                        <span class="blueText">加载更多</span>
                    </div>
                    <div v-else class="more flexR">
                        <span>暂无数据</span>
                    </div>
                </div>
                <div class="clear flexR pointer" v-if="msgData.db.length>0">
                    <Icon type="md-checkmark" size="22"/>
                    <span>清空待办</span>
                </div>
            </TabPane>-->
        </Tabs>
        <Modal v-model="modalPl" width="668">
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="md-information-circle"></Icon>
                <span>审核评论</span>
            </p>
            <div class="flexC content">
                <p class="flexR">
                    昵称为：“<span style="color: #2d8cf0">{{itemData.name}}</span>”的网友，<span style="margin: 0 5px">{{itemData.createTime | timeType}}</span>于
                    <span>{{itemData.cityName}}</span>发布, IP地址为 <span>{{itemData.ip}}</span>。
                </p>
                <p v-html="itemData.content" style="margin: 10px 0"></p>
                <p>文章标题：{{itemData.wTitle}}</p>
                <p>文章简介：{{itemData.wEasytitle}}</p>
            </div>
            <div slot="footer">
                <Button type="error" @click="submitShenhe(0)" :loading="shenheloading">拒绝</Button>
                <Button type="primary" @click="submitShenhe(1)" :loading="shenheloading">通过</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {CmsPlList, CmsPlStatus} from '@/api/cms/msg'

    export default {
        name: "message",
        data() {
            return {
                tabName: 'name1',
                msgData: {
                    pl: [
                        {
                            type: 'pl',
                            title: '蒂姆·库克回复了你的邮件',
                            time: '05-08 14:33'
                        },
                    ],
                    plCount: 0,
                    gz: [
                        {
                            title: '蒂姆·库克 关注了你',
                            time: '09-08 15:33',
                            img: 'https://dev-file.iviewui.com/xrzbBR99F6tYsDJPLNrvwhllowbuL7Gw/avatar'
                        },
                        {
                            title: '曾小晖 在一篇文章中 @你',
                            time: '11-08 15:33',
                            img: 'https://www.zengxiaohui.com/skin/xiaohui/img/avatar.jpg'
                        }
                    ],
                    db: [
                        {
                            status: 0,
                            title: '2019 下半年 OKR',
                            time: '2019-08-08'
                        },
                        {
                            status: 2,
                            title: '李先生的面试评审',
                            time: '2019-08-10'
                        },
                        {
                            status: 1,
                            title: '公司成立 五周年生日会',
                            time: '2019-10-10'
                        }
                    ]
                },
                json: {
                    page: 1,
                    pageSize: 5
                },
                itemData:{

                },
                modalPl: false,
                shenheloading: false
            }
        },
        created() {
            this.getPlData() // 获取评论数量
        },
        mounted() {
        },
        methods: {
            tabSwitch(data) {
                this.tabName = data
            },
            // 获取评论列表
            getPlData() {
                CmsPlList(this.json).then(res => {
                    res = res.data
                    if (res.code === 1) {
                        this.msgData.plCount = res.data.count
                        this.$emit('getMsgData', res.data.count)
                        if (this.json.page > 1) {
                            for (let v of res.data.list) {
                                v.type = 'pl'
                                this.msgData.pl.push(v)
                            }
                        } else {
                            for (let v of res.data.list) {
                                v.type = 'pl'
                            }
                            this.msgData.pl = res.data.list
                        }
                    }
                })
            },
            // 加载更多
            getMorePl() {
                if (this.json.page < (parseInt(this.msgData.plCount / this.json.pageSize))) {
                    this.json.page++
                    this.getPlData()
                } else {
                    this.$Message.warning('没有更多消息了')
                }
            },
            // 评论刷新
            updataPl() {
                this.json.page = 1
                this.getPlData()
            },
            // 选择评论预览
            checkPl(item) {
                this.itemData = JSON.parse(JSON.stringify(item))
                this.modalPl = true
            },
            // 审核评论
            submitShenhe(status) {
                this.shenheloading =true
                var id = this.itemData.id
                CmsPlStatus({id: id, status: status}).then(res => {
                    res = res.data
                    if (res.code === 1) {
                        this.shenheloading = false
                        this.$Message.success('审核成功')
                        this.modalPl = false
                        this.updataPl() // 更新通知列表
                    } else {
                        this.shenheloading = false
                        this.$Message.success('审核失败！请重试...')
                    }
                })
            }
        },
        watch: {},
        filters: {
            // 显示时间格式化
            timeType(e) {
                let moment = require('moment')
                // 时间中文显示库
                moment.defineLocale('zh-cn', {
                    months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
                    monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
                    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
                    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
                    weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
                    longDateFormat: {
                        LT: 'Ah点mm分',
                        LTS: 'Ah点m分s秒',
                        L: 'YYYY-MM-DD',
                        LL: 'YYYY年MMMD日',
                        LLL: 'YYYY年MMMD日Ah点mm分',
                        LLLL: 'YYYY年MMMD日ddddAh点mm分',
                        l: 'YYYY-MM-DD',
                        ll: 'YYYY年MMMD日',
                        lll: 'YYYY年MMMD日Ah点mm分',
                        llll: 'YYYY年MMMD日ddddAh点mm分'
                    },
                    meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
                    meridiemHour: function (hour, meridiem) {
                        if (hour === 12) {
                            hour = 0;
                        }
                        if (meridiem === '凌晨' || meridiem === '早上' ||
                            meridiem === '上午') {
                            return hour;
                        } else if (meridiem === '下午' || meridiem === '晚上') {
                            return hour + 12;
                        } else {
                            // '中午'
                            return hour >= 11 ? hour : hour + 12;
                        }
                    },
                    meridiem: function (hour, minute, isLower) {
                        var hm = hour * 100 + minute;
                        if (hm < 600) {
                            return '凌晨';
                        } else if (hm < 900) {
                            return '早上';
                        } else if (hm < 1130) {
                            return '上午';
                        } else if (hm < 1230) {
                            return '中午';
                        } else if (hm < 1800) {
                            return '下午';
                        } else {
                            return '晚上';
                        }
                    },
                    calendar: {
                        sameDay: function () {
                            return this.minutes() === 0 ? '[今天]Ah[点整]' : '[今天]LT';
                        },
                        nextDay: function () {
                            return this.minutes() === 0 ? '[明天]Ah[点整]' : '[明天]LT';
                        },
                        lastDay: function () {
                            return this.minutes() === 0 ? '[昨天]Ah[点整]' : '[昨天]LT';
                        },
                        nextWeek: function () {
                            var startOfWeek, prefix;
                            startOfWeek = moment().startOf('week');
                            prefix = this.unix() - startOfWeek.unix() >= 7 * 24 * 3600 ? '[下]' : '[本]';
                            return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
                        },
                        lastWeek: function () {
                            var startOfWeek, prefix;
                            startOfWeek = moment().startOf('week');
                            prefix = this.unix() < startOfWeek.unix() ? '[上]' : '[本]';
                            return this.minutes() === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm';
                        },
                        sameElse: 'LL'
                    },
                    ordinalParse: /\d{1,2}(日|月|周)/,
                    ordinal: function (number, period) {
                        switch (period) {
                            case 'd':
                            case 'D':
                            case 'DDD':
                                return number + '日';
                            case 'M':
                                return number + '月';
                            case 'w':
                            case 'W':
                                return number + '周';
                            default:
                                return number;
                        }
                    },
                    relativeTime: {
                        future: '%s内',
                        past: '%s前',
                        s: '几秒',
                        m: '1 分钟',
                        mm: '%d 分钟',
                        h: '1 小时',
                        hh: '%d 小时',
                        d: '1 天',
                        dd: '%d 天',
                        M: '1 个月',
                        MM: '%d 个月',
                        y: '1 年',
                        yy: '%d 年'
                    },
                    week: {
                        // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
                        dow: 1, // Monday is the first day of the week.
                        doy: 4  // The week that contains Jan 4th is the first week of the year.
                    }
                });
                return moment(e, 'YYYY-MM-DD HH:mm').startOf('minutes').fromNow(true) + '前'
            }
        }
    }
</script>

<style lang="less">
    .message-page {
        max-width: 328px;

        .ivu-tabs-bar {
            margin-bottom: 5px;
            padding: 0px 5px;
        }

        /*禁用css3动画 解决tab切换后 滚动条卡住的问题*/

        .ivu-tabs-content {
            transition: none !important;
        }

        .content {
            max-height: 300px;
            max-width: 328px;
            overflow-y: auto;
            overflow-x: hidden;

            .tabItem {
                height: 67px;
                width: 100%;
                padding: 12px 24px;
                border-bottom: 1px solid #e8eaec;
                cursor: pointer;
                text-align: left;
                justify-content: flex-start;

                &:hover {
                    background-color: #F0FAFF;
                }

                & > div {
                    justify-content: center;

                    span {
                        line-height: 20px;
                        justify-content: center;
                    }
                }

                & > div:last-child {
                    margin-left: 20px;
                }
            }

            .more {
                justify-content: center;
                height: 35px;

                span {
                    line-height: 35px;
                }
            }
        }

        .tab3 {
            .status {
                span {
                    line-height: 35px;
                    padding: 0px 5px;
                    border-radius: 4px;
                }

                .wks {
                    color: #42B883;
                    border: 1px solid #42B883;
                }

                .jxz {
                    color: #2D8CF0;
                    border: 1px solid #2D8CF0;
                }

                .jjdq {
                    color: #F5222D;
                    border: 1px solid #F5222D;
                }
            }
        }

        .clear {
            justify-content: center;
            border-top: 1px solid #e8eaec;
            height: 35px;

            span {
                line-height: 35px;
            }
        }
    }
</style>